<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>效果图</title>
		<style type="text/css">
			body{
				background-color: #333;margin: 0;padding: 0;
			}
			.box{
				position: absolute;top: 100px;left: 200px;width: 460px;height: 360px;
			}
			.main{
				position: absolute;width: 200px;height: 200px;border: 1px solid #fff ;z-index: 2;cursor: move;
			}
			.minDiv{
				width: 8px;
				height: 8px;
				background: #fff;
				font-size: 0;
				position: absolute;
			}
			.minDiv.left-up{
				top: -4px;left: -4px;cursor: nw-resize;
			}
			.minDiv.left{
				top: 50%;
				margin-top: -4px;
				left: -4px;
				cursor: e-resize;
			}
			.minDiv.left-down{
				left: -4px;
				bottom: -4px;
				cursor: sw-resize;
			}
			.minDiv.top{
				top: -4px;
				left: 50%;
				margin-left: -4px;
				cursor: n-resize;
			}
			.minDiv.right-up{
				top: -4px;
				right: -4px;
				cursor: ne-resize;
			}
			.minDiv.right{
				top: 50%;
				right: -4px;
				cursor: e-resize;
			}
			.minDiv.right-down{
				bottom: -4px;
				right: -4px;
				cursor: se-resize;
			}
			.minDiv.bottom{
				bottom: -4px;
				left: 50%;
				margin-left: -4px;
				cursor: s-resize;
			}
			img{
				position: absolute;z-index: 1;
			}
			
			.img1{
				opacity: 0.5;
			}
			.img2{
				/*clip裁切的rect为上宽高右*/
				clip: rect(0px,20px,100px,100px);
			}
			#preview{
				position: absolute;top: 100px;top: 100px;left: 680px;width: 460px;height: 360px;
			}
			#preview #img3{
				position: absolute;top: 0;left: 0;
			}
			
		</style>
	</head>
	<body>
		<div id="box" class="box">
			
            <img class="img1" src="img/1.jpg" />
			<img id="img2" class="img2" src="img/1.jpg" />
			<div class="main" id="main">
				<div id="left-up" class="minDiv left-up"></div>
				<div id="left" class="minDiv left"></div>
				<div id="left-down" class="minDiv left-down"></div>
				<div id="up" class="minDiv top"></div>
				<div id="right-up" class="minDiv right-up"></div>
				<div id="right" class="minDiv right"></div>
				<div id="right-down" class="minDiv right-down"></div>
				<div id="down" class="minDiv bottom"></div>
			</div>
		</div>
		<div id="preview">
			<img id="img3" class="img3" src="img/1.jpg" />
		</div>
	</body>
</html>
